<template>
  <div ref="chartRef" style="width: 100%; height: 80px"/>
</template>

<script setup>
import {onMounted, watch} from "vue";
import {useEcharts} from "../../../../hook/ useEcharts";
import * as echarts from "echarts";

const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
});

const {chartRef, initChart, updateChart} = useEcharts();

const option = {
  tooltip: {
    trigger: 'item',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '2%',
    right: '1%',
    bottom: '6%',
    top: '20%',
    containLabel: true
  },
  series: [{
    type: 'pie',
    clockWise: false,
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#01F1FE',
          },
          {
            offset: 1,
            color: '#008BFF',
          },
        ]),
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    },
    hoverAnimation: false,
    data: [
      {
        value: 100 - props.value,
        name: 'invisible',
        itemStyle: {
          normal: {
            color: '#103477',
          },
          emphasis: {
            color: '#103477',
          },
        },
      },
      {
        value: props.value,
        label: {
          normal: {
            formatter: function (params) {
              return params.value + "%";
            },
            position: 'center',
            show: true,
            textStyle: {
              fontSize: '10',
              fontWeight: 'bold',
              color: '#fff',
            },
          },
        },
      }
    ],
  },
  ]
};

watch(() => {
  return props.value
}, (newVal) => {
  updateChart({
    series: [{
      data: [{value: 100 - newVal,}, {
        value: newVal,
        label: {
          normal: {
            formatter: function (params) {
              return params.value + "%";
            },
            position: 'center',
            show: true,
            textStyle: {
              fontSize: '10',
              fontWeight: 'bold',
              color: '#fff',
            },
          },
        },
      }]
    }]
  })
}, {deep: true})

onMounted(() => {
  // 初始化图表
  initChart(option);
});

</script>

<style scoped lang="scss">

</style>
